<div>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>
                        <span>
                            <vc:i18n name="订单收费" namespace="payFeeOrder"></vc:i18n>
                        </span>({{payFeeOrderInfo.payerObjName}}
                        <span @click="_viewRoomData()" v-if="payFeeOrderInfo.payerObjType == '3333'">
                            <vc:create path="property/viewRoomData"></vc:create>
                        </span> )
                    </h5>
                    <div class="ibox-tools" style="top:10px;">
                        <button type="button" class="btn btn-primary btn-sm" style="margin-left:10px"
                            v-on:click="vc.goBack()">
                            <span>
                                <span>
                                    <vc:i18n name="返回"></vc:i18n>
                                </span>
                            </span>
                        </button>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-7" style="border-right: solid #f4f4f4 1px;padding-left: 30px;">
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">
                                    <span>
                                        <vc:i18n name="费用ID" namespace="payFeeOrder"></vc:i18n>
                                    </span>
                                </label>
                                <div class="col-sm-10" @click="_viewFee()">
                                    <label class=" col-form-label hand">{{payFeeOrderInfo.feeId}}</label>
                                    <span>
                                        <vc:create path="property/viewFeeData"></vc:create>
                                    </span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">
                                    <span>
                                        <span>
                                            <vc:i18n name="费用项目" namespace="payFeeOrder"></vc:i18n>
                                        </span>
                                    </span>
                                </label>
                                <div class="col-sm-10 " @click="_viewFeeConfig()">
                                    <label class=" col-form-label hand">{{payFeeOrderInfo.feeName}}</label>
                                    <span>
                                        <vc:create path="property/viewFeeConfigData"></vc:create>
                                    </span>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">
                                    <vc:i18n name="费用类型" namespace="payFeeOrder"></vc:i18n>
                                </label>
                                <div class="col-sm-10">
                                    <label class=" col-form-label">{{payFeeOrderInfo.feeTypeCdName}}</label>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">
                                    <span>
                                        <span>
                                            <vc:i18n name="计费起始时间" namespace="payFeeOrder"></vc:i18n>
                                        </span>
                                    </span>
                                </label>
                                <div class="col-sm-10">
                                    <label class=" col-form-label">{{payFeeOrderInfo.endTime}}</label>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">
                                    <vc:i18n name="缴费时间" namespace="payFeeOrder"></vc:i18n>
                                </label>
                                <div class="col-sm-6">
                                    <input v-model="payFeeOrderInfo.createTime" type="text"
                                        :placeholder="vc.i18n('必填，请填写缴费时间','payFeeOrder')" readonly
                                        class="payFeeOrderCreateTime" style="border: none; outline: none;">
                                </div>
                            </div>
                            <div class="form-group row" v-if="payFeeOrderInfo.feeFlag != '2006012'">
                                <label class="col-sm-2 col-form-label">
                                    <vc:i18n name="缴费周期" namespace="payFeeOrder"></vc:i18n>
                                </label>
                                <div class="col-sm-6">
                                    <select class="custom-select" v-model="payFeeOrderInfo.tempCycles"
                                        @change="_changeMonth(payFeeOrderInfo.tempCycles)">
                                        <option selected disabled value="">{{vc.i18n('请选择缴费周期','payFeeOrder')}}</option>
                                        <option v-for="item in payFeeOrderInfo.paymentCycles" :value="item">
                                            {{item}}{{vc.i18n('个月','payFeeOrder')}}
                                        </option>
                                        <option value="-102">{{vc.i18n('自定义周期','payFeeOrder')}}</option>
                                        <option value="-101">{{vc.i18n('自定义金额','payFeeOrder')}}</option>
                                        <option value="-103">{{vc.i18n('自定义结束时间','payFeeOrder')}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row" v-if="payFeeOrderInfo.tempCycles == '-102'">
                                <label class="col-sm-2 col-form-label">
                                    <vc:i18n name="实际周期" namespace="payFeeOrder"></vc:i18n>
                                </label>
                                <div class="col-sm-6">
                                    <!--oninput="value=value.replace(/[^\d]/g,'')"  这里取消校验 实际中 可能要填写 几点几个月-->
                                    <input type="text" :placeholder="vc.i18n('请输入实际周期','payFeeOrder')"
                                        v-model="payFeeOrderInfo.cycles"
                                        v-on:change="changeCycle(payFeeOrderInfo.cycles)" class="form-control">
                                </div>
                            </div>
                            <div class="form-group row" v-show="payFeeOrderInfo.tempCycles == '-103'">
                                <label class="col-sm-2 col-form-label">
                                    <vc:i18n name="缴费结束时间" namespace="payFeeOrder"></vc:i18n>
                                </label>
                                <div class="col-sm-6">
                                    <input type="text" :placeholder="vc.i18n('请选择缴费结束时间','payFeeOrder')"
                                        v-model="payFeeOrderInfo.custEndTime" class=" form-control cust-endTime">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label" style="padding-right:0px;">
                                    <vc:i18n name="备注" namespace="payFeeOrder"></vc:i18n>
                                </label>
                                <div class="col-sm-6" style="padding-left:5px;">
                                    <textarea :placeholder="vc.i18n('可填，请填写备注','payFeeOrder')" class="form-control"
                                        v-model="payFeeOrderInfo.remark">
                                    </textarea>
                                </div>
                            </div>
                        </div>
                        <div class="col-4" style="padding-left: 30px;">
                            <div class="row" v-if="payFeeOrderInfo.builtUpArea">
                                <label class="col-sm-3 col-form-label">
                                    <vc:i18n name="面积：" namespace="payFeeOrder"></vc:i18n>
                                </label>
                                <label class="col-sm-8 col-form-label">{{payFeeOrderInfo.builtUpArea}}</label>
                            </div>
                            <div class="row" v-if="payFeeOrderInfo.builtUpArea">
                                <label class="col-sm-3 col-form-label">
                                    <vc:i18n name="单价：" namespace="payFeeOrder"></vc:i18n>
                                </label>
                                <label class="col-sm-8 col-form-label">{{payFeeOrderInfo.squarePrice}}</label>
                            </div>
                            <div class="row" v-if="payFeeOrderInfo.builtUpArea">
                                <label class="col-sm-3 col-form-label">
                                    <vc:i18n name="附加费：" namespace="payFeeOrder"></vc:i18n>
                                </label>
                                <label class="col-sm-8 col-form-label">{{payFeeOrderInfo.additionalAmount}}</label>
                            </div>
                            <div class="row" v-else>
                                <label class="col-sm-3 col-form-label">
                                    <vc:i18n name="固定费：" namespace="payFeeOrder"></vc:i18n>
                                </label>
                                <label class="col-sm-8 col-form-label">{{payFeeOrderInfo.additionalAmount}}</label>
                            </div>
                            <div class="row">
                                <label class="col-sm-3 col-form-label" style="line-height: 50px;padding-right:0px;">
                                    <vc:i18n name="应收款：" namespace="payFeeOrder"></vc:i18n>
                                </label>
                                <label class="col-sm-8 col-form-label"
                                    style="font-size: 30px;color: red;padding-left:0px;">￥{{payFeeOrderInfo.totalFeePrice}}</label>
                            </div>
                            <div class="row form-group">
                                <label class="col-sm-3 col-form-label" style="padding-right:0px;">
                                    <vc:i18n name="支付方式:" namespace="payFeeOrder"></vc:i18n>
                                </label>
                                <div class="col-sm-6">
                                    <select class="custom-select" v-model="payFeeOrderInfo.primeRate">
                                        <option selected disabled value="">{{vc.i18n('必填，请选择支付方式','payFeeOrder')}}
                                        </option>
                                        <option v-for="(item,index) in payFeeOrderInfo.primeRates" :key="index"
                                            v-if="item.statusCd != '5' && item.statusCd != '6'" :value="item.statusCd">
                                            {{item.name}}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-3 col-form-label" style="padding-right:0px;">
                                    <vc:i18n name="实收款" namespace="payFeeOrder"></vc:i18n>
                                </label>
                                <div class="col-sm-8" style="padding-left:5px;">
                                    <input type="text" :placeholder="vc.i18n('请输入实际收款金额','payFeeOrder')"
                                        v-model="payFeeOrderInfo.receivedAmount" class="form-control"
                                        v-if="payFeeOrderInfo.receivedAmountSwitch=='1'">
                                    <label class="col-sm-8 col-form-label"
                                        v-if="payFeeOrderInfo.receivedAmountSwitch=='2'" style="font-size: 15px;">
                                        ￥{{payFeeOrderInfo.receivedAmount}}
                                    </label>
                                </div>
                            </div>
                            <div class="row">
                                <label class="col-sm-3 col-form-label" style="line-height: 50px;padding-right:0px;">
                                    <vc:i18n name="应缴金额：" namespace="payFeeOrder"></vc:i18n>
                                </label>
                                <label class="col-sm-8 col-form-label"
                                    style="font-size: 30px;color: red;padding-left:0px;">
                                    ￥{{payFeeOrderInfo.accountAmount >= payFeeOrderInfo.receivedAmount ? '0.00' :
                                    (payFeeOrderInfo.receivedAmount - payFeeOrderInfo.accountAmount).toFixed(2)}}
                                </label>
                            </div>
                            <div class="row">
                                <label class="col-sm-3 col-form-label">
                                    <vc:i18n name="业主账户：" namespace="payFeeOrder"></vc:i18n>
                                </label>
                                <label class="col-sm-3 col-form-label">
                                    <input type="checkbox" checked="checked" @change="_useUserAccountChange">
                                </label>
                                <label class="col-sm-3 col-form-label">
                                    <span>
                                        <vc:i18n name="赠送积分：" namespace="payFeeOrder"></vc:i18n>
                                    </span>
                                    {{payFeeOrderInfo.integralQuantity}}
                                </label>
                            </div>
                            <div class="form-group row">
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-6">
                                    <button type="button" class="btn btn-success btn-lg btn-block"
                                    v-if="payFeeOrderInfo.primeRate == '3' || payFeeOrderInfo.primeRate == '4'"
                                        @click="_openPayFee('qrCode')">
                                        <vc:i18n name="扫码收费" namespace="payFeeOrder"></vc:i18n>
                                    </button>
                                </div>
                                <div class="col-sm-6">
                                    <button type="button" class="btn btn-primary btn-lg btn-block"
                                        v-if="payFeeOrderInfo.offlinePayFeeSwitch !='2'" @click="_openPayFee('common')">
                                        <vc:i18n name="提交收费" namespace="payFeeOrder"></vc:i18n>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <vc:create path="property/payFeeOrderResult"></vc:create>
    <vc:create path="property/payFeeOrderConfirm"></vc:create>
    <vc:create path="property/payFeeUserAccount"></vc:create>
    <vc:create path="property/payFeeDiscount"></vc:create>
    <vc:create path="property/payFeeCoupon"></vc:create>
    <vc:create path="property/prestoreAccount2"></vc:create>
</div>